<script setup lang="ts">
import {onMounted, reactive} from "vue";
import manImage from '@/assets/images/man.png';
import lineImage from '@/assets/images/line.png';
import headerImage from '@/assets/images/header.jpeg';
import qrcodeImage from '@/assets/images/qrcode.png';
import {initWechat} from "@/utils/wechat.ts";
import {logRecord} from "@/api/leaflet.ts";
import {useRoute} from "vue-router";



const outlines = reactive([
  {title:"第一章 本地开发环境",items:["Web开发介绍","开发环境","开发工具"],type:2},
  {title:"第二章 PHP基础",items:["数据类型","字符串","数组","函数","运算符","控制结构","面相对象基础"],type:2},
  {title:"第三章 工具",items:["包管理工具composer","版本管理工具Git","代码仓库gitlab/github/gitee","Postman"],type:2},
  {title:"第四章 数据库",items:["Mysql","Redis","Elasticsearch"],type:2},
  {title:"第五章 laravel框架入门",items:["路由","控制器/模型","中间件","队列","缓存","文件存储","Collection","Eloquent ORM","数据库迁移","鉴权"],type:2},
  {title:"第六章 测试",items:["冒烟测试","单元测试","压测","接口文档"],type:2},
  {title:"第七章 前端基础",items:["html 、css基础","JavaScript基础","vue3简单入门","Typescript基础入门","Element Plus使用","vant4使用"],type:2},
  {title:"第八章 YiDigital营销自动化平台--管理后台(PC)",items:["前后端代码库基础准备","资源：素材管理、内容管理、活动管理","培育：用户、潜客、旅程、群组、资料、标签","触点：微信公众号、邮件、短信、埋点页","分析：潜客分析、活动分析"],type:1},
  {title:"第九章 YiDigital营销自动化平台--获客工具(H5)",items:["潜客列表","公海池","数据看板","素材中心、电子名片"],type:2},
  {title:"第十章 服务部署",items:["域名、服务器购买、备案、域名解析等","百度、360、google收录官网","公众号开发配置、企业微信开发配置","服务器lnmp环境搭建、代码上线"],type:1},
  {title:"第十一章 企业开发流程及相关工具介绍",items:["Tapd的使用","项目流程"],type:2},
  {title:"第十二章 AI大模型使用",items:["使用coze搭建自己的智能体","llama3大模型本地实践"],type:1},
])

const shareInfo = reactive({
  title:"Yidigial编程训练营开课啦",
  desc:"一站式Web编程培训，助你成为全栈开发工程师。",
  imageUrl:"https://www.shuangying.tech/upload/33/1/oCM5tgqPLMnfxR6tJ8koWT.jpg"
})

const getGridColumns = (type: number) => type === 2 ? 'grid-cols-2' : 'grid-cols-1';


const callMobile=(num:string)=>{
  window.location.href = `tel:${num}`;
}

const route = useRoute();
const pushId = route.query.pushId as string;
const omniUserUuid = localStorage.getItem('omni_user_uuid') as string;
onMounted(() => {
  console.log("onMounted: "+omniUserUuid)
  if(omniUserUuid){
    initWechat(shareInfo.title,shareInfo.desc,shareInfo.imageUrl)
    logRecordAction("leaflet_view");
  }
});

const logRecordAction = async (action_code: string) => {
  try {
    await logRecord({
      omni_user_uuid: omniUserUuid,
      action_code,
      push_uuid:pushId
    });
  } catch (error) {
    console.error('记录日志时出错:', error);
  }
};


</script>

<template>
  <div class="bg-blue-800 min-h-screen text-white overflow-hidden">
    <div class="relative pl-4 font-sans font-bold">
      <div class="absolute top-24 -right-2 z-20">
        <van-image width="240" :src="manImage" />
      </div>

      <div class="relative z-10">
        <div class="pt-6">
          <span class="text-2xl">Yidigital</span>
          <div class="bg-amber-200 inline-block rounded px-2 ml-2 text-white text-sm">
            <span class="text-blue-800">易数编程训练营</span>
          </div>
        </div>
        <div class="absolute -top-10 right-0 pt-2">
          <div class="w-32 h-32 bg-blue-500 rounded-full -mr-16"></div>
        </div>
        <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white mt-10 inline-block px-2 pt-1 pb-1 rounded-l-xl text-sm">
          <p>一站式Web编程培训，助你成为全栈工程师</p>
        </div>
        <div class="pt-4">
          <span class="text-3xl text-amber-200">高薪就业</span>
        </div>
        <div class="pt-2 text-xl">
          <p>PHP Web开发就业班</p>
          <p>技能在身 就业无忧</p>
        </div>
        <div class="pt-2">
          <van-button type="warning" size="small" @click="callMobile('15921840270')">点击联系客服...</van-button>
        </div>
      </div>
    </div>

    <div class="w-32 h-16 bg-blue-500 rounded-t-full overflow-hidden mt-4 -ml-8"></div>

    <div class="-mt-8 z-40">
      <van-image :src="lineImage" />
    </div>

    <!-- 课程详情   -->
    <div class="border border-white m-2 rounded mb-8 pb-6">
      <div class="text-amber-200 text-center py-5 text-xl">
        <span>课程详情</span>
      </div>
      <div class="m-4">
        <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white pl-2 pt-1 pb-1 rounded">
          <p class="w-1/2">1、基础部分</p>
        </div>
        <div class="pt-2 text-xs">
          <p class="mt-2">PHP编程基础：<span class="text-blue-200">掌握PHP的核心概念与编程技巧</span></p>
          <p class="mt-2">Laravel框架：<span class="text-blue-200">深入学习Laravel，一个现代而强大的PHP Web应用框架</span></p>
          <p class="mt-2">常用技能：<span class="text-blue-200">熟练使用Git、Composer、Docker和Kubernetes等</span></p>
          <p class="mt-2">数据库技术：<span class="text-blue-200">深入理解MySQL、Redis和Elasticsearch等数据库系统的运用</span></p>
          <p class="mt-2">服务器部署：<span class="text-blue-200">学习如何部署LNMP（Linux, Nginx, MySQL, PHP）服务器环境</span></p>
          <p class="mt-2">前端开发：<span class="text-blue-200">掌握HTML/CSS，Vue3、TypeScript、Element Plus和Vant4等技术栈</span></p>
        </div>
      </div>
      <div class="m-4">
        <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white pl-2 pt-1 pb-1 rounded">
          <p class="w-1/2">2、项目实战</p>
        </div>
        <div class="pt-2 text-xs">
          <p class="mt-2">《YiDigital自动化营销平台》：<span class="text-blue-200">这个SaaS项目包含后台管理系统和H5获客工具。通过此项目，您将能够将基础知识融会贯通，深入掌握Laravel框架、数据库、队列、缓存、项目部署等技术栈、以及前端相关技术栈。</span></p>
          <p class="mt-2"><span class="text-blue-200">除了上述技术栈，项目中包含的公众号、企业微信开发、内容活动管理、客户旅程、用户群组、潜客管理和数据分析等功能，将极大提升您的项目经验。</span></p>
        </div>
      </div>
      <div class="m-4">
        <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white pl-2 pt-1 pb-1 rounded">
          <p class="w-1/2">3、AI大模型</p>
        </div>
        <div class="pt-2 text-xs">
          <p class="mt-2">Coze服务：<span class="text-blue-200">打造一款AI智能助手，通过AI技术结合行业深度融合，帮助您轻松掌握“AI+行业”的落地解决方案。</span></p>
          <p class="mt-2">llama3模型：<span class="text-blue-200">基于Ollama本地部署的强大AI模型，将其嵌入实战项目中，让您在本地玩转AI大模型。</span></p>
        </div>
      </div>
    </div>

    <!-- 讲师介绍   -->
    <div class="bg-[#162688] pt-6 pb-6">
      <div class="text-amber-200 text-center py-5 text-xl">
        <span>讲师介绍</span>
      </div>
      <div class="m-4 text-sm">
        <p style="text-indent: 2em;">7年外企开发经验，参与开发的项目服务<span class="text-amber-200">安利</span>、<span class="text-amber-200">迪奥</span>、<span class="text-amber-200">可口可乐</span>等数百家知名企业。擅长PHP全栈开发、微信公众号开发、企业微信开发、mysql性能优化、数据分析等。</p>
      </div>
      <!-- 讲师信息 -->
      <div class="flex items-center space-x-4 p-4 rounded-lg">
        <!-- 头像 -->
        <van-image
            :src="headerImage"
            class="w-32 h-32 rounded-lg border-4 border-white"
            fit="cover"
        />
        <!-- 个人信息 -->
        <div>
          <h3 class="text-xl font-semibold mb-2">Shimao</h3>
          <ul class="text-sm space-y-1">
            <li>• 7年外企经验</li>
            <li>• 项目服务世界知名企业</li>
            <li>• 深耕营销自动化领域</li>
          </ul>
        </div>
      </div>

    </div>

    <!-- 课程大纲 -->
    <div class="border border-white m-2 rounded pb-6 mb-6 mt-6">
      <div class="text-amber-200 text-center my-5 text-xl">
        <span>课程大纲</span>
      </div>
      <div class="m-4">
        <div v-for="(outline, index) in outlines" :key="index" class="pt-6">
          <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white pl-2 pt-1 pb-1 rounded">
            <p>{{ outline.title }}</p>
          </div>
          <!-- 使用计算属性简化 class 和 item 显示逻辑 -->
          <div :class="[getGridColumns(outline.type), 'mt-4 px-4 text-sm grid gap-2']">
            <div v-for="(item, i) in outline.items" :key="i">{{ i + 1 }}. {{ item }}</div>
          </div>
        </div>
      </div>
    </div>


    <div class="bg-[#162689] p-2 pt-6 pb-6">
      <div class="border border-white  rounded">
        <div class="text-amber-200 text-center my-5 text-xl">
          <span>限时特惠</span>
        </div>

        <div class="flex justify-center">
          <div class="pt-4 inline-block">
            <div class="flex items-center bg-[#f9ffaa] text-blue-800 rounded-full px-8 py-2 font-bold">
              <div class="border-r-2 border-blue-800 pr-2">
                <p class="line-through">原价9980元</p>
                <p>限时特价仅需</p>
              </div>
              <div class="pl-2 text-5xl flex items-end">
                5980<span class="text-sm">元</span>
              </div>
            </div>
          </div>
        </div>

        <div class="text-amber-200 text-center my-5 text-xl">
          <span>您关心的说明</span>
        </div>
        <div class="bg-[#1b2e98] m-4 pt-6 pb-6 rounded-xl pl-4 pr-4">
          <div>
            <van-row>
              <van-col span="14">
                <div class="bg-gradient-to-r from-[#c9f4b6] to-[#eefbb3] text-white pl-2 pt-1 pb-1 rounded">
                  <p class="text-[#1b2e98] font-bold">1、基础部分</p>
                </div>
              </van-col>
            </van-row>
            <p class="pt-2 pb-4 text-sm" style="text-indent: 1em;">预计3-4个月，具体以实际教学进度为准</p>
          </div>

          <div>
            <van-row>
              <van-col span="14">
                <div class="bg-gradient-to-r from-[#c9f4b6] to-[#eefbb3] text-white pl-2 pt-1 pb-1 rounded">
                  <p class="text-[#1b2e98] font-bold">2、授课地点</p>
                </div>
              </van-col>
            </van-row>
            <p class="pt-2 pb-4 text-sm" style="text-indent: 1em;">地点：新柳城C区</p>
          </div>

          <div>
            <van-row>
              <van-col span="14">
                <div class="bg-gradient-to-r from-[#c9f4b6] to-[#eefbb3] text-white pl-2 pt-1 pb-1 rounded">
                  <p class="text-[#1b2e98] font-bold">3、售后保障</p>
                </div>
              </van-col>
            </van-row>
            <p class="pt-2 pb-4 text-sm" style="text-indent: 1em;">开课半个月内，可退款</p>
          </div>

        </div>
      </div>
    </div>


    <div class="bg-[#051667] p-2">
      <div>
        <div class="text-amber-200 text-center my-5 text-xl">
          <span>联系我们</span>
        </div>

        <van-row>
          <van-col span="10">
            <div class="m-4">
              <van-image :src="qrcodeImage" />
            </div>
          </van-col>
          <van-col span="14">
            <div class="my-4">
              <div class="bg-gradient-to-r from-[#c9f4b6] to-[#eefbb3] text-white px-2 py-1 rounded inline-block">
                <p class="text-[#1b2e98] font-bold">扫码咨询客服</p>
              </div>
              <div class="mt-8">
                <p>咨询电话:<span @click="callMobile('15921840270')">15921840270</span></p>
                <p>授课地址:新柳城C区</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>



  </div>
</template>

<style scoped>
/* 这里可以添加样式 */
p{
  line-height: 1.6;
}
</style>
